<template>
    <div class="content">
        <el-container class="content">
            <el-header class="headers">
                <el-form :inline="true">
                    <el-row>
                        <el-col :span="21">
                            <el-form-item :label="$t('webAuto.ProcessNumber')">
                                <el-input v-model="data.oddNumber"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item style="width: 200px;">
                                <el-button type="primary" @click="onSubmit">
                                    {{ $t('calendar.search') }}
                                </el-button>
                                <el-button type="info" @click="onRest">
                                    {{ $t('calendar.rest') }}
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-main class="tableList">
                <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                          style="height:95%;width:100%"
                          :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                          :cell-style="{ textAlign: 'center' }">
                    <el-table-column fixed="right" :label="$t('title.interface')" width="200">
                        <template #default="scope">
                            <el-button type="warning" text bg size="small" @click="showProcess(scope.row)">{{$t('webAuto.huidiao')}}</el-button>
                            <el-button type="danger" text bg size="small" @click="deleteData(scope.row)">{{$t('webAuto.delete')}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="errorType" :label="$t('webAuto.cuowuleix')" width="170">
                        <template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="(scope.row.errorType == 'JSON组成异常' || scope.row.errorType == '接口请求异常')?'danger':'success'">
                                {{ scope.row.errorType}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fromName" :label="$t('webAuto.processName')" width="170"/>
                    <el-table-column prop="businessKey" :label="$t('webAuto.ProcessNumber')" width="170"/>
                    <el-table-column prop="instanceId" :label="$t('webAuto.LCInstanceNumber')" width="230"/>
                    <el-table-column prop="url" :label="$t('webAuto.dizhi')" width="650"/>
                    <el-table-column prop="sendType" :label="$t('webAuto.leixing')" width="150"/>
<!--                    <el-table-column prop="json" :label="'接口请求参数'" width="150">-->
<!--                        <template #default="scope">-->
<!--                            <el-check-tag checked type="primary" v-if="scope.row.json?.trim().length > 0">查看json</el-check-tag>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="errorLog" :label="'接口请求报错信息'" width="150">-->
<!--                        <template #default="scope">-->
<!--                            <el-check-tag checked type="danger"  v-if="scope.row.errorLog?.trim().length > 0">错误信息</el-check-tag>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column prop="created" :label="$t('webAuto.chuangjianTime')" width="250"/>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination :currentPage="data.currentPage" :page-size="data.pageSize"
                                   :page-sizes="[20, 30, 50, 100]" :small="small" :disabled="disabled"
                                   :background="background"
                                   layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
                </div>
                <el-dialog direction="rtl" :title="$t('webAuto.xiangqing')" v-model="data.processVisible" closeFree
                           style="height: auto;min-height:100%;;width: 100%;margin:0!important;" :close-on-click-modal="false"
                           :close-on-press-escape="false">
                    <jsonForm @handler-after="handlerAfter" :rowList = "data.selectInstance"></jsonForm>
                    <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="data.processVisible = false">{{$t('webAuto.close')}}</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import errorInfo, { getErrorInfo} from '@/api/errorInfo.js'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import jsonForm from "@/views/workspace/oa/jsonForm.vue";
import roleApi from "@/api/role.js";
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
components: {
    jsonForm
}
const data = reactive({
    oddNumber: '',
    currentPage: 1,
    pageSize: 10,
    total: 0,
    tablesList: [],
})

const jsonFormDialogRef = ref()
// 表格绑定的默认样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 页面显示加载
onMounted(() => {
    tableList()
})

// 分页
const handleSizeChange = (val) => {
    data.pageSize = val
    tableList()
}
const handleCurrentChange = (val) => {
    data.currentPage = val
    tableList()
}

const tableList = () => {
    errorInfo.getErrorInfo({
        pageSize: data.pageSize,
        pageNo: data.currentPage,
        businessKey: data.oddNumber,
    }).then(res => {
        data.tablesList = res.data.records
        data.total = res.data.total
    }).catch(err => {
        console.log(err)
        ElMessage.error(err.response.data)
    })
}

// 查询
const onSubmit = () => {
    data.currentPage = 1
    tableList()
}
// 重置
const onRest = () => {
    data.oddNumber = ''
    data.period = []
    data.contractName = ''
    data.currentPage = 1
    tableList()
}


//查看表格里面的表单
const showProcess = (row) => {
    data.processVisible = true
    data.selectInstance = row
}
const handlerAfter = () => {
    data.processVisible = false
    // this.getIdoList()
}

//删除error信息
const deleteData = (row) => {
    ElMessageBox.confirm(t('webAuto.delHuidiao'), t('webAuto.prompt'), {
        confirmButtonText: t('webAuto.sure'),
        cancelButtonText: t('webAuto.cancel'),
        type: 'warning',
    }).then(() => {
        // 在用户确认后发送自定义接口请求
        errorInfo.deleteData(row.id).then(res => {
            ElMessage.success(t('webAuto.DeleteSuccessfully'))
            tableList()
        }).catch(err => {
            ElMessage.error(t('webAuto.DeleteFailed'))
        })
    });
}

</script>

<style scoped lang="less">
.content {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.headers {
  min-height: 45px;
  max-height: 120px;
  width: 100%;
  overflow: hidden;
}

.tableList {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 分页样式
.demo-pagination-block {
  margin: 10px 0 0 5px;
  height: 40px;
}

.el-form--inline .el-form-item {
  margin: 0 10px 5px 0 !important;
}
</style>